<template>
  <div>
    <div>
      num1:<input v-model.number="num1" style="width: 100px" /><br />
      num2:<input v-model.number="num2" style="width: 100px" />
    </div>
    <span>加法等于:{{ addNum }}</span>    <br />
    <span>减法等于:{{ subNum }}</span> <br />
    <span>平均数等于:{{ averageNum }}</span>

    <div>
      <p>页面宽度: {{ screen.width }}</p>
      <p>页面高度: {{ screen.height }}</p>
      <el-button @click="getWH">获取页面的宽高</el-button>
    </div>
  </div>
</template>
​
<script setup>
import { ref } from "vue";
import useAdd from "./hooks/useAdd"; //引入自动hook
import useSub from "./hooks/useSub"; //引入自动hook
import useAverage from "./hooks/useAverage"; //引入自动hook
import useScreenWh from "./hooks/useScreenWh"; //引入自动hook

const num1 = ref(2);
const num2 = ref(1);
//加法功能-自定义Hook（将响应式变量或者方法形式暴露出来）
const { addNum, addFn } = useAdd({ num1, num2 });
addFn(num1.value, num2.value);
//减法
const { subNum, subFn } = useSub({ num1, num2 });
subFn(num1.value, num2.value);
// 平均数
const { averageNum, averageFn } = useAverage(addNum);
averageFn(addNum.value);

const { screen, getWH } = useScreenWh();
</script>
​
<style></style>
